<template>
  <div>
    <el-row style="margin-top: 30px; text-align: right">
      <el-button
        icon="el-icon-back"
        circle
        style="margin-top: 10px; margin-left: 10px; background-color: skyblue"
        @click="back()"
      ></el-button>
      <el-button
        type="primary"
        size="medium"
        round
        style="margin-right: 30px"
        @click="exportPDF"
        >导出简历</el-button
      >
      <el-button
        type="primary"
        size="medium"
        round
        v-if="this.description === '企业用户'"
        style="margin-right: 30px"
        @click="confirmInterView"
        >确认面试</el-button
      >
      <!-- <el-button
        :type="isEdit ? 'danger' : 'success'"
        size="medium"
        calss="button"
        round
        >{{ isEdit ? '关闭编辑' : '打开编辑' }}</el-button
      > -->
    </el-row>

    <el-divider><Item icon="resume" />简历预览</el-divider>
    <el-scrollbar style="height: 90vh; margin-top: 10px">
      <div class="resumeMain" id="pdfDom" ref="resumeMain">
        <!-- 简历标题 开始 -->
        <div class="title">
          <span class="title_span1">个人简历</span>
          <span class="title_span2">Personal resume</span>
        </div>
        <!-- 简历标题 结束-->

        <!-- 基本信息 开始-->
        <div class="splitSection"><span> 基本信息</span></div>
        <div class="funcInfo_box">
          <div>
            <li>
              <span>姓名：{{ resumeForm.name || '张三' }}</span>
            </li>
            <li>
              <span>性别：{{ resumeForm.sex == 1 ? '男' : '女' || '男' }}</span>
            </li>
            <li>
              <span
                >专业：{{
                  majorListForIdAndName.find(
                    (item) => item.id === resumeForm.major
                  ).name || ''
                }}</span
              >
            </li>
            <li>
              <span
                >学历：{{
                  educations.find((item) => item.id === resumeForm.education)
                    .name || ''
                }}</span
              >
            </li>
            <li>
              <span>出生年月： {{ resumeForm.birthday }}</span>
            </li>
            <li>
              <span>电话：{{ resumeForm.mobile }}</span>
            </li>
            <li>
              <span>邮箱：{{ resumeForm.email }}</span>
            </li>
            <li>
              <span>毕业院校：{{ resumeForm.school }}</span>
            </li>
            <li>
              <span>毕业时间：{{ resumeForm.graduationTime }}</span>
            </li>
          </div>
          <div>
            <!-- <el-upload
            v-if="resumeForm.avatar"
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span>头像图片</span> -->
            <el-avatar
              shape="square"
              :size="150"
              alt="学生头像"
              :src="BASE_API + '/' + resumeForm.avatar"
              style="margin-left: 15%"
            ></el-avatar>
          </div>
        </div>
        <!-- 基本信息 结束-->

        <!-- 求职意向 开始-->
        <div class="splitSection"><span> 求职意向</span></div>
        <div class="jobIntention">
          <li>
            <span>期望工作城市：{{ resumeForm.expectedCity }}</span>
          </li>
          <li>
            <span
              >期望从事的职位类别：{{
                resumeForm.expectedPositionCategoryName
              }}</span
            >
          </li>
          <li>
            <span
              >期望从事的工作岗位：{{ resumeForm.expectedPositionName }}</span
            >
          </li>
          <li>
            <span
              >期望薪资：{{
                salaries.find((item) => item.id === resumeForm.expectedSalary)
                  .name || ''
              }}</span
            >
          </li>
        </div>
        <!-- 求职意向 结束-->
        <!--  荣誉证书 开始-->
        <div class="splitSection"><span> 荣誉证书</span></div>
        <div class="experience">
          {{ resumeForm.certificate }}
        </div>
        <!-- 实荣誉证书 结束-->
        <!--  掌握技能 开始-->
        <div class="splitSection"><span> 掌握技能</span></div>
        <div class="experience">
          {{ resumeForm.skill }}
        </div>
        <!-- 掌握技能 结束-->
        <!-- 实习经历 开始-->
        <div class="splitSection"><span> 实习经历</span></div>
        <div class="experience">
          {{ resumeForm.internshipExperience }}
        </div>
        <!-- 实习经历 结束-->

        <!-- 项目经验 开始-->
        <div class="splitSection"><span> 项目经验</span></div>
        <div class="experience">
          {{ resumeForm.projectExperience }}
        </div>
        <!-- 项目经验 结束-->
        <!-- 工作经历 开始-->
        <div class="splitSection"><span> 工作经历</span></div>
        <div class="experience">{{ resumeForm.experience }}</div>
        <!-- 工作经历 结束-->
        <!-- 自我评价 开始-->
        <div class="splitSection"><span> 自我评价</span></div>
        <div class="experience">
          {{ resumeForm.selfEvaluation }}
        </div>
        <!-- 自我评价 结束-->
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import htmlToPdf from '@/utils/htmlToPdf';
import { reqBatchAddCompanyEmploy } from '../CompanyMng/api/companyEmployApi';
export default {
  name: 'ResumeTemplate',
  props: ['isEdit', 'resumeRowInfo', 'resumeId', 'companyEmploy'],
  data() {
    return {
      BASE_API: process.env.VUE_APP_BASE_API, // 前缀
      jobNames: [],
      resumeForm: {},
      educations: [],
      salaries: [],
      imageUrl: '',
    };
  },
  computed: {
    // 用户
    ...mapGetters(['name', 'description', 'loginId']),
    // 岗位
    ...mapGetters('PostPostingMng', ['jobIPage', 'jobList']),
    // 企业
    ...mapGetters('CompanyMng', ['companyIdAndNameAndCodeList']),
    // 工作分类
    ...mapGetters('JobCategoryMng', ['categories', 'jobNameAndIdList']),
    // 数据字典
    ...mapGetters('DictMng', ['educationList', 'salaryList']),
    // 院系管理---专业编号与名称列表
    ...mapGetters('AcademyMng', ['majorListForIdAndName']),
  },
  watch: {
    resumeRowInfo() {
      this.resumeForm = {
        ...this.resumeRowInfo,
      };
    },
    // 薪水
    salaryList() {
      this.$set(this, 'salaries', this.salaryList);
    },
    // 学历
    educationList() {
      this.$set(this, 'educations', this.educationList);
    },
    //对应类别下的 工作名称
    jobNameAndIdList() {
      this.$set(this, 'jobNames', this.jobNameAndIdList);
    },
    'resumeForm.expectedPositionCategory'(newValue, oldValue) {
      if (!this.isEdit) {
        this.resumeForm.expectedPosition = '';
      }
      if (newValue) {
        // this.jobNames = [];
        // 发送请求
        this.$store.dispatch('JobCategoryMng/getIdAndNameList', newValue);
      }
    },
  },
  mounted() {
    // 获取学历列表
    this.getEducationList();
    // 获取专业列表
    this.getMajorList();
    // 获取职位分类列表
    this.getCategories();
    // 获取薪水列表
    this.getSalaries();
    if (this.resumeRowInfo) {
      this.resumeForm = this.resumeRowInfo;
    }
    // switch (this.description) {
    //   case '学生用户':
    //     // 检测简历是否编辑

    //     break;
    // }
  },
  methods: {
    confirmInterView() {
      if (this.description === '企业用户') {
        // 简历编号
        let params = {
          ...this.companyEmploy,
        };
        reqBatchAddCompanyEmploy([params]).then((res) => {
          this.$message.success(res.message);
        });
      }
    },

    // 回到上一个页面
    back() {
      this.$router.go(-1);
    },

    // 简历导出为PDF
    exportPDF() {
      htmlToPdf.getPdf('个人简历');
    },

    // 头像上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    // 获取薪资列表
    async getSalaries() {
      // 查询薪资id
      let dict = await this.$store.dispatch('DictMng/getDictIdByName', '薪水');
      if (dict && dict.id) {
        this.$store.dispatch('DictMng/getSalaryListByParentId', dict.id);
      } else {
        this.$message({
          message: '返回的薪水编号为空',
          type: 'error',
          duration: 1 * 1000,
        });
      }
    },
    // 获取职位分类列表
    getCategories() {
      this.$store.dispatch('JobCategoryMng/getCategories');
    },
    // 获取学历列表
    async getEducationList() {
      // 查询学历id
      let dict = await this.$store.dispatch('DictMng/getDictIdByName', '学历');
      if (dict && dict.id) {
        this.$store.dispatch('DictMng/getEduListByParentId', dict.id);
      } else {
        this.$message({
          message: '返回的学历编号为空',
          type: 'error',
          duration: 1 * 1000,
        });
      }
    },
    // 获取专业编号与名称列表
    getMajorList() {
      this.$store.dispatch('AcademyMng/getMajorListForIdAndName');
    },
  },
};
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';
$leftGap: 30px;
$topGap: 30px;
* {
  margin: 0;
  padding: 0;
}

.resumeMain {
  position: relative;
  box-sizing: border-box;
  list-style: none;
  border: 1px solid $borderColor2;
  border-top-width: 5px;
  border-bottom-width: 5px;
  background-color: $backColor;
  margin-top: $topGap;
  height: 2300px;
  width: 1000px;
  margin-left: 12%;
  // 各标题末尾标签
  .title {
    float: left;
    margin-top: $topGap;
    width: 100%;
    transform: translateX(50%-10%);
    overflow: hidden;
    & .title_span1 {
      font-size: 24px;
      font-weight: 700;
      margin-right: 10px;
      color: $fontColor;
    }
    & .title_span2 {
      color: $fontColor;
    }
  }
  /* 基本信息 */
  .splitSection {
    position: relative;
    float: left;
    width: 100%;
    margin-top: $topGap;
    padding: 5px;
    background-color: $borderColor;
    border-radius: 1% 0 0 1%;
    & span {
      margin-left: $leftGap;
      font-size: 18px;
      font-weight: 700;
    }
    &::after {
      position: absolute;
      content: '';
      top: 0;
      right: -15px;
      border: 15px solid $borderColor;
      border-right: 0px;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
    }
  }
  .funcInfo_box {
    float: left;
    position: relative;
    width: 100%;
    & div {
      &:nth-child(1) li {
        float: left;
        width: 40%;
        margin-left: $leftGap;
        padding: 20px;
      }
      &:nth-child(2) {
        width: 40%;
        text-align: center;
        display: inline-block;
        // margin-top: -10%;
        & span {
          // float: left;
          position: absolute;
          top: 10%;
          right: 5%;
          width: 150px;
          height: 200px;
          // background-color: $borderColor;
          background: url('~@/icons/svg/pigyao.jpg') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  /* 求职意向 */
  .jobIntention {
    float: left;
    position: relative;
    width: 100%;
    & li {
      float: left;
      width: 50%;
      padding: 10px;
      padding-left: 20px;
      margin-left: $leftGap;
      // &:nth-child(2n + 1) {
      //   // margin-left: $leftGap;
      // }
      // &:nth-child(2n) {
      //   // margin-left: 23%;
      // }
      // &:nth-child(4) {
      //   // margin-left: 15%;
      // }
    }
  }

  /* 实习/项目/工作经历 */
  .experience {
    float: left;
    position: relative;
    margin-left: $leftGap;
    padding: 20px;
    width: 100%;
    height: 10%;
    max-height: 10%;
  }
}

/* 用户头像上传 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
